<template>
    <div o-Container>
        <el-upload ref="upload" action="#" :limit="num" :multiple="multiple" :on-exceed="handleExceed" list-type="picture-card" accept=".jpg,.jpeg,.png"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload"
            :on-change="uploaderChange" :http-request="httpRequest" :file-list="imgList" :disabled="isEdit">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img class="center-image" width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "img_update", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            // 主图
            imgList: [],
        }
    },
    props: {
        num: {
            type: Number,
            default: 1,
        },
        octopus: {
            type: Object,
            default: {},
        },
        list: {
            type: Array,
            default: [],
        },
        // 是否允许多选文件
        multiple: {
            type: Boolean,
            default: false
        },
        isEdit:{
            type: Boolean,
            default: false
        }
    },
    watch: {
        list: {
            handler(v) {
                v && (this.imgList = v)
            },
            deep: true,
            immediate: true,
        }
    },
    methods: {
        beforeAvatarUpload(file) {
            const isJPEG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 < 512;
            if (!isJPEG && !isPNG) {
                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                    return false
            } else if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 512KB!');
                return false
            }
            return true
        },
        handleRemove(file, fileList) {
            this.imgList = fileList
            this.$emit('imgList', this.imgList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed(files, fileList) {
            this.$message.error('最多只能上传 ' + this.num + ' 张图片')
        },
        httpRequest({ file }) {
            let o = this
            this.octopus.request.api.upload(file,
                function () {

                },
                function (fileData) {
                    if (fileData.status.code == 200) {
                        // 清空上传组件的文件列表
                        o.$refs.upload.clearFiles()
                        // 删除旧的本地文件数据
                        o.imgList = o.imgList.filter(item => item.raw !== file)
                        // 添加上传后的文件数据到 imgList
                        o.imgList.push({url: o.octopus.config.url + fileData.content.url, name: fileData.content.name, status: 'success'})
                        o.$emit('imgList', o.imgList)
                    }
                });
        },

        uploaderChange(file, fileList, callback) {
            this.imgList = fileList
        },
    },
}
</script>
<style scoped>
>>>.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #F87338;
    border-radius: 1rem;
    box-sizing: border-box;
    width: 12rem;
    height: 12rem;
    line-height: 12.5rem;
    vertical-align: top;
}

>>>.el-upload--picture-card i {
    font-size: 3rem;
    color: #F87338;
}

>>>.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #F87338;
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12rem;
    height: 12rem;
    margin: 0 1rem 1rem 0;
    display: inline-block;
}

>>>.el-upload-list__item {
  transition: none !important;
}
.center-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
</style>